<template>
    <div>
        <el-col :span="24" >
            <el-form :inline="true" :span="18">
                <el-form-item label="标题">
                    <el-input style="width: 200px;" v-model="formData.id"  clearable />
                </el-form-item>

                <el-form-item >
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                </el-form-item>

                <el-form-item >
                    <el-button type="primary" @click="insertSearch">新增</el-button>
                </el-form-item>
            </el-form> 
        </el-col>
        <el-col :span="24">
            <el-form :inline="true" :span="18">
                <el-form-item >
                    <el-button type="primary" @click="complete(0)">未完成</el-button>
                </el-form-item>

                <el-form-item >
                    <el-button type="primary" @click="complete(1)">已完成</el-button>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="complete(2)">删除</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    
        <el-col :span="24">
                <el-table :data="tableData" style="width: 100%" stripe border class="my-table"
                
                @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="40"   />
                    <el-table-column prop="id" label="id" width="80" />
                    <el-table-column prop="user.username" label="用户" width="120"/>
                    <el-table-column prop="consult.name" label="咨询师" width="120" />
                    <el-table-column prop="appointmentStartTime" label="开始时间"  width="180"/>
                    <el-table-column prop="appointmentEndTime" label="结束时间" width="180" />
                    <el-table-column prop="consultationType" label="咨询方式" width="120"/>

                    <el-table-column prop="createTime" label="咨询创建时间" width="180" />
                    <el-table-column label="咨询状态" width="80">
                        <template v-slot="scope">
                            <el-button type="primary" link v-if="scope.row.status ==0">未开始</el-button>
                            <el-button type="primary" link v-if="scope.row.status ==1">已结束</el-button>
                            <el-button type="primary" link v-if="scope.row.status ==2">已取消</el-button>
                        </template>
                    </el-table-column>    

                    <el-table-column prop="operate" label="操作" width="200">
                        <template v-slot="scope">
                            <el-button type="primary" link @click="problemsOperate(scope,1)">点击具体内容</el-button>
                            <el-button type="primary" link @click="problemsOperate(scope,2)" v-if="scope.row.status ==0">点击完成</el-button>
                            <el-button type="primary" link @click="problemsOperate(scope,3)">点击编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            
    <el-pagination
        :page-sizes="[5, 10, 30, 40]"
        :size="size"
        :disabled="disabled"
        :background="background"
        :default-page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="pageNumChange"
    />
       
   <!-- 这个是新增用的弹窗 -->
   <el-dialog v-model="insertVisible" title="新增信息" width="500">
                    <el-form :model="consult">
                       
                        <el-form-item label="用户名"  :label-width="formLabelWidth">
                            <el-input  v-model="consult.userId" autocomplete="off"/>
                        </el-form-item>        
                        <el-form-item label="咨询师"  :label-width="formLabelWidth">
                            <el-input  v-model="consult.counselorId" autocomplete="off"/>
                        </el-form-item>   
                        <el-form-item label="开始时间"  :label-width="formLabelWidth">
                                <el-date-picker
                                    v-model="consult.appointmentStartTime"
                                    type="datetime"
                                />
                        </el-form-item>   
                        <el-form-item label="咨询类别 " :label-width="formLabelWidth">  
                            <el-select v-model="consult.consultationType" placeholder="请选择分类">        
                                      <el-option :label="v.name" :value="v.name" v-for="(v,i) in updateType" :key="i"/>
                                </el-select>
                            
                        </el-form-item>
                        <el-form-item label="详细内容" :label-width="formLabelWidth">  
                            <el-input v-model="consult.remarks" autocomplete="off"/>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="updateIsFalse">取消</el-button>
                        <el-button type="primary" @click="updateData(2)">
                        确认
                        </el-button>
                    </div>
                    </template>
                </el-dialog> 
    
          <!-- 这个是修改用的弹窗 -->
                <el-dialog v-model="updateVisible" title="修改信息" width="500">
                    <el-form :model="consult">
                        <el-form-item label="id"  :label-width="formLabelWidth">
                            <el-input  v-model="consult.id" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="用户名"  :label-width="formLabelWidth">
                            <el-input  v-model="consult.userId" autocomplete="off"/>
                        </el-form-item>        
                        <el-form-item label="咨询师"  :label-width="formLabelWidth">
                            <el-input  v-model="consult.counselorId" autocomplete="off"/>
                        </el-form-item>   
                        <el-form-item label="开始时间"  :label-width="formLabelWidth">
                                <el-date-picker
                                    v-model="consult.appointmentStartTime"
                                    type="datetime"
                                />
                        </el-form-item>

                        <el-form-item label="结束时间" :label-width="formLabelWidth">
                            <el-date-picker
                                    v-model="consult.appointmentEndTime"
                                    type="datetime"
                                />
                        </el-form-item>    
                        <el-form-item label="咨询类别 " :label-width="formLabelWidth">  
                            <el-select v-model="consult.consultationType" placeholder="请选择分类">        
                                      <el-option :label="v.name" :value="v.name" v-for="(v,i) in updateType" :key="i"/>
                                </el-select>
                            
                        </el-form-item>
                        <el-form-item label="详细内容" :label-width="formLabelWidth">  
                            <el-input v-model="consult.remarks" autocomplete="off"/>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="updateIsFalse">取消</el-button>
                        <el-button type="primary" @click="updateData(1)">
                        确认
                        </el-button>
                    </div>
                    </template>
                </el-dialog> 
   
             
                    <el-dialog
                        v-model="centerDialogVisible" width="500" title="具体内容" idth="500" align-center>
                        <span>{{ context }} </span>
                        <template #footer>
                        <div class="dialog-footer">
                            <el-button type="primary" @click="centerDialogVisible = false">
                            确认
                            </el-button>
                        </div>
                        </template>
                    </el-dialog>
               

    </div>
</template>
    
<script setup>
   import { ElMessage } from 'element-plus';
    import { ref,getCurrentInstance, onMounted, watch, watchEffect } from 'vue';
    const current = getCurrentInstance();
    const {$http} = current.appContext.config.globalProperties;
    const insertVisible = ref(false)

    const updateVisible = ref(false)
    const centerDialogVisible = ref(false)
    const formLabelWidth = '140px'
    // 用于存放查询得的问题数据
     const tableData = ref([])
     // 用于存放通过id查询得回复数据

    //   用于存放问题的类型
    const formattedCurrentTime=ref();
    
    const consult = ref({
         id:'',
        userId:'',
        counselorId:'',
        appointmentStartTime:'',
        appointmentEndTime:'',
        consultationType:'',
        consultationTypeId:'',
        remarks:'',
        createTime:'',
        status:'',
        del:'',
    })
    
    
    const formData = ref({
        id: '',
        pageNum: 1,
        pageSize: 10,
        status:""
    })

    const total = ref(0)
    function getAllPage(){
        $http({
            url: 'http://localhost:8081/sfzy/consultationAppointment/page',
            method: 'get',
            params: formData.value
        }).then(res=>{
            tableData.value = res.data.data.list;
            console.log(tableData.value);
            total.value = res.data.data.total;
        })
        
    }
        const multipleTableRef = ref();
        const multipleSelection = ref([]) // 多选的数据
        // 多选
        ids = ref([])
        function handleSelectionChange(val){
           ids=val.map(function(item){return item.id})

        }
    
    function complete(e){
        if (e==0) {
            // 未完成
            formData.value.status=0;
            getAllPage()
        }
        if (e==1) {
            //已完成
            formData.value.status=1;
            getAllPage()
        }
        if (e==2) {
            //批量删除
            $http({
            url: 'http://localhost:8081/sfzy/consultationAppointment?ids='+ids.value,
            method: 'delete',
        }).then(res=>{
            ElMessage.success('删除成功');
            console.log(tableData.value);
            total.value = res.data.data.total;
        })
       

        }
    }
     //获取点击的分页页码并执行搜索功能
    function pageNumChange(num){
    formData.value.pageNum=num;
    getAllPage()
    }
    function handleSizeChange(size){
    formData.value.pageSize=size;
    getAllPage()
    }
    function handleSearch(){
        $http({
            url: 'http://localhost:8081/sfzy/consultationAppointment',
            method: 'get',
            params: formData.value
        }).then(res=>{
            tableData.value = res.data.data;  
        })
    }
    function updateData(e){
        for(let i in updateType.value){
            if(updateType.value[i].name == consult.value.consultationType){
                consult.value.consultationTypeId = updateType.value[i].id;
                console.log(consult.value.consultationTypeId);
            }
        }
        if(e==1){
            console.log(consult.value)
        $http({
                url: 'http://localhost:8081/sfzy/consultationAppointment',
                method: 'put',
                data:consult.value
                
            }).then(res=>{
                
                ElMessage.success('修改成功');
              
                updateVisible.value = false;
                getAllPage();
            })
        }
           
    if (e==2) {
         $http({
                url: 'http://localhost:8081/sfzy/consultationAppointment',
                method: 'post',
                data:consult.value
                
            }).then(res=>{
                ElMessage.success('新增成功');
                updateVisible.value = false;
                getAllPage();
            })
    }
        
    }
    // 获取 咨询方式
    const updateType = ref([])
    function getType(){
        $http({
                url: 'http://localhost:8081/sfzy/chargeType',
                method: 'get'
            }).then(res=>{
                updateType.value = res.data.data;
                console.log(res.data.data);

            })
    }
    function insertSearch(){
        getType();
        insertVisible.value = true;
        consult.value = {
            id:'',
            userId:'',
            counselorId:'',
            appointmentStartTime:'',
            appointmentEndTime:'',
            consultationType:'',
            consultationTypeId:'',
            remarks:'',
            createTime:'',
            status:'',
            del:'',
        }
    }
    const context=ref();
    function problemsOperate(i,k){
        console.log(i.row);
        
        if(k ==1){
            context.value=i.row.remarks;
            console.log(context.value);
            centerDialogVisible.value=true;
            
        }else if(k==2){
            console.log("这是完成操作");
            $http({
                url: 'http://localhost:8081/sfzy/consultationAppointment',
                method: 'put',
                data: {
                    id:i.row.id,
                    userId:i.row.userId,
                    counselorId:i.row.counselorId,
                    appointmentStartTime:i.row.appointmentStartTime,
                    appointmentEndTime:  formattedCurrentTime.value,
                    consultationTypeId:i.row.consultationTypeId,
                    remarks:i.row.remarks,
                    createTime:i.row.createTime,
                    status:1,
                    del:0,
                }
            }).then(res=>{
                ElMessage.success('已完成');
                getAllPage();
            })
        }else if(k==3){
            consult.value={
                id:i.row.id,
                    userId:i.row.userId,
                    counselorId:i.row.counselorId,
                    appointmentStartTime:i.row.appointmentStartTime,
                    appointmentEndTime:i.row.appointmentEndTime,
                    consultationTypeId:i.row.consultationTypeId,
                    consultationType:i.row.consultationType,
                    remarks:i.row.remarks,
                    createTime:i.row.createTime,
                    status:1,
                    del:0,
            }
            getType();
            updateVisible.value = true;
        }
        
    }


      watchEffect(() => {
        updateTime();
      }, {
        delay: 1000,
        flush: 'post'
      });
    
const updateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始计数，所以要加1
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  formattedCurrentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
    function updateIsFalse() {
        insertVisible.value =  false;
        updateVisible.value =  false;
        consult.value = {
            id:'',
            userId:'',
            counselorId:'',
            appointmentStartTime:'',
            appointmentEndTime:'',
            consultationType:'',
            remarks:'',
            createTime:'',
            status:'',
            del:''
        }
       
    }

    onMounted(()=>{
        getAllPage();
        
    })
</script>
    
<style scoped>
    .my-table :deep(th){background-color: #1890ff;color: #ffffff;text-align: center;}
</style>